<template>
  <div class="event_list">
    <div :key="index" v-for="(event, index) in targetRules">
      <div class="event_title">
        <div>
          {{index === 0 ? '首要' : '次要'}}目标
        </div>
        <a-icon v-if="index !== 0" @click="removeRule(index)" type="close" />
      </div>
      <div class="times">
        用户被触达后，在
        <a-input v-model="event.times" style="width: 140px; margin: 0 12px;" :disabled="type === 'view'">
          <a-select slot="addonAfter" v-model="event.unit" style="width: 70px" :disabled="type === 'view'">
            <a-select-option value="MINUTE">分钟</a-select-option>
            <a-select-option value="HOUR">小时</a-select-option>
            <a-select-option value="DAY">天</a-select-option>
          </a-select>
        </a-input>
        内完成以下转化事件，则认为完成目标
      </div>
      <div class="filter-con">
        <div class="flex">
          <a-select style="width: 200px;"  v-model="event.event" :disabled="type === 'view'">
            <a-select-option v-for="item in eventList" :key="item.name" :value="item.name">{{item.displayName}}</a-select-option>
          </a-select>
          <a-button v-if="type === 'edit'" type="link" @click="addEvent(event)"><a-icon type="plus" />添加筛选条件</a-button>
        </div>
        <MultiLevelFilter :datasourceId="projectId" :disabled="type === 'view'" v-if="event.showFilter" v-model="event.filter" v-bind:properties="properties" />
        <!-- <div :key="index" v-for="(rule, index) in event.rules">
          <Rule v-model="rule.value" v-bind:properties="properties" v-bind:virtual="virtual" v-bind:group="canAddGroup" v-on:add="addRule" v-on:add-group="addFilter" v-on:remove="removeRule"></Rule>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import { baseMixin } from '@/store/app-mixin';
import MultiLevelFilter from "@/views/components/Filter/newLevel/MultiLevelFilter.vue";

export default {
    name: 'Target',
    mixins: [baseMixin],
    components: {
      MultiLevelFilter
    },
    props: {
      projectId: String,
      type: String,
    },
    data () {
      return {
        eventList: [],
        properties: [],
        targetRules: [],
      }
    },
    computed: {
    },
    mounted () {
      this.init();
    },
    methods: {
      ...mapActions('projectManage', ['getEventList', 'getUserProperties', 'getEventProperties']),
      init() {
        this.getEventList(this.projectId).then(res => {
          this.eventList = res;
          if (this.$route.name === 'OperationPlanManageAdd') {
            this.targetRules = [{
              showFilter: false,
              filter: {},
              event: this.eventList[0].name,
              times: 15,
              unit: 'HOUR'
            }];
          }
        });
        this.getUserProperties(this.projectId).then(res => {
          this.properties = [...this.properties, ...res];
        });
        this.getEventProperties(this.projectId).then(res => {
          this.properties = [...this.properties, ...res];
        });
      },
      addEvent(filterEvent) {
        if (filterEvent.showFilter) {
          filterEvent.filter.rules.push({
            operator: 'equal',
            index: filterEvent.filter.rules.length,
            values: []
          });
        } else {
          filterEvent.filter =  {
            condition: 'AND',
            rules: [{
              operator: 'equal',
              index: 0,
              values: []
            }]
          };
          filterEvent.showFilter = true;
          this.targetRules = [...this.targetRules];
        }
      },
      getRuleData() {
        const list = this.targetRules.map((item, index) => {

          const data = {
            convert_type: index === 0 ? 'PRIMARY' : 'SECONDARY',
            event_pattern: {
              condition: 'OR',
              matcher_list: {
                event: item.event,
              }
            },
            window: {
              value: item.times,
              unit: item.unit
            }
          };

          if (item.showFilter) {
            data.event_pattern.matcher_list.filter = {
              condition: item.filter.condition,
              rules: item.filter.rules,
            };
          }

          return data;
        });

        return list;
      },
      validate() {
        const hasEmpty = this.targetRules.some(res => {
          if (res.showFilter) {
            return res.filter.rules.some(rule => {
              return !rule.operator || !rule.property || (!rule.value && !rule.values.length);
            });
          }

          return false;
        });

        if (hasEmpty) {
          this.$message.warning('请完善筛选条件');
        }

        return !hasEmpty;
      },
      setRuleData(list) {
        this.targetRules = list.map(item => {
          return {
            times: item.window.value,
            unit: item.window.unit,
            event: item.event_pattern.matcher_list.event,
            showFilter: !!item.event_pattern.matcher_list.filter,
            filter: item.event_pattern.matcher_list.filter || {}
          }
        });
      },
      removeRule(index) {
        this.targetRules = this.targetRules.filter((item, itemI) => index !== itemI);
      },
      addTarget() {
        if (this.targetRules.length === 4) {
          this.$message.warning('最多可以添加三个次要目标');
          return;
        }
        this.targetRules.push({
          showFilter: false,
          filter: {},
          event: this.eventList[0].name,
          times: 15,
          unit: 'HOUR'
        });
      }
    }
  }
</script>

<style scoped>
.plan_list {
  width: 100%;
}

.times {
  display: flex;
  margin-top: 12px;
  line-height: 32px;
}

.flex {
  display: flex;
}

.event_title {
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 10px;
}

.filter-con {
  background: #f5f8fc;
  margin: 10px 0;
  padding: 12px;
}
</style>